<template>
  <div class="game">
    <div class="game-header">
      <img src="@/assets/image/game/g3.png" alt="" class="w-[47px] h-[47px]" />
      <div class="flex flex-col justify-between">
        <p class="text-[#fff] text-[16px] font-bold">YooMatch</p>
        <p class="text-[#fff] text-[12px]">{{ t('download.subtitle') }}</p>
      </div>
    </div>
    <div class="flex items-center justify-center flex-col bg2">
      <img src="@/assets/image/game/g5.png" alt="" class="w-[44px] h-[44px]" />
      <div class="flex flex-col items-center justify-center">
        <p class="text-[#6B563D] mb-[5px] text-[18px] font-bold">YooMatch</p>
        <p class="text-[#6B563D] w-[238px] text-center text-[14px]">
          {{ t('download.description') }}
        </p>
      </div>
      <div
        class="mt-[-23px] relative flex flex-col justify-center justify-center"
      >
        <img
          src="@/assets/image/game/g8.png"
          alt=""
          class="w-[210px] h-[172px]"
        />
        <div class="g11">
          <p class="text-[#FFD700] text-[22px] font-bold">3000</p>
          <img
            src="@/assets/image/game/g10.png"
            alt=""
            class="absolute right-[-18px] top-[-15px] w-[33px] h-[36px]"
          />
        </div>
      </div>
      <div>
        <p class="text-[#FF5555] text-[13px] mt-[12px]">
          - {{ t('download.newUserReward') }} -
        </p>
      </div>
      <div
        class="mt-[10px] w-[289px] h-[46px] g14 flex items-center justify-center"
      >
        <p class="text-[#6B563D] text-[16px] font-bold" @click="download">
          {{ t('download.downloadNow') }}
        </p>
      </div>
      <div>
        <div class="w-[289px] text-[13px] mt-[10px] text-center">
          {{ t('download.inviteCodeTip') }}
          <span class="text-[#FF5555]">27033181</span>
          {{ t('download.getRewardTip') }}
        </div>
      </div>
    </div>

    <div class="flex justify-center items-center">
      <p class="text-[#6B563D] w-[289px] text-[13px] mt-[10px] text-center">
        {{ t('download.disclaimer') }}
      </p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import api from "@/api/api";
import { showToast } from "vant";
import { useI18n } from "vue-i18n";
const data = ref('')
import { useAutoRequest } from "@/hooks/loading";
const [loading, inviteStore] = useAutoRequest(api.inviteStore);
const route = useRoute()

const getData = async () => {
  const res = await inviteStore({
    // 从路由参数中获取 package_name 和 device_id
    package_name: route.query.package_name,
    device_id: route.query.device_id
  });
  data.value = res;
  console.log(res, 'url');
  window.open(res)
};
const download = () => {
  getData();
}
// watchEffect(() => {
//   const package_name = route.query.package_name
//   const device_id = route.query.device_id
//   if (device_id && package_name) {
//     getData();
//   }
// });

const { t } = useI18n();
</script>
<style scoped lang="scss">
.game {
  width: 100%;
  min-height: 100vh;
  background-image: url("@/assets/image/game/g1.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  .game-header {
    background-image: url("@/assets/image/game/g2.png");
    background-size: cover;
    background-repeat: no-repeat;
    height: 60px;
    background-position: center;
    display: flex;
    align-items: center;
    gap: 11px;
    padding-left: 13px;
  }
}
.bg2 {
  background-image: url("@/assets/image/game/g13.png");
  background-size: 100% 250px;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-bottom: 5px;
  margin-top: 10px;
}
.g11 {
  background-image: url("@/assets/image/game/g9.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 35px;
  width: 128px;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -50px auto 0 auto;
}
.g14 {
  background-image: url("@/assets/image/game/g14.png");
  background-size: cover;
  background-repeat: no-repeat;
}
</style>
